<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>样式测试页面</title>
<style type="text/css">
	html,body,.container {
		height: 100%;
		margin: 0;
	}
	ul{
		list-style: none;
		padding: 0;
	}
	li{
		height: 50px;
    background-color: #ddd;
    line-height: 50px;
    padding-left: 10px;
    margin-top: 2px;
	}
	.header {
		height: 20%;
	    background-color: #70afe4;
	    text-align: center;
	    font-size: 30px;
	    color: #fff;
	    min-height: 60px;
	}
	/* modal 样式 */
	.modal {
		position: fixed;
	    height: 100%;width: 100%;
	    top: 0;
	    z-index: 66;
	    font-size:14px;color:#777;
	    background-color: rgba(0, 0, 0, 0.5);
	    display: none;
	}
	.modal .panel {
		background-color: #fff;
	    width: 250px;
	    border-radius: 5px;overflow:hidden;
	    position: absolute;
	    top: 50%;left: 50%;
	    margin-top: -75px;margin-left: -125px;
	}
	.modal .panel .title {
		background-color: #e6e6e6;
	    height: 36px;
	    line-height: 36px;
	    padding-left: 13px;
	}
	.modal .panel .content {
		padding: 26px;
	    font-size: 16px;
	    color: #333;
		word-break: break-all;/* 内容打散 */
	}
	.modal .panel .btns {
	    text-align: right;
    	padding: 0px 15px 12px;
	}
	.modal .panel .btns span {
	    display: inline-block;
	    padding: 4px 10px;
	    border-radius: 2px;
	    background-color: #e6e6e6;
	}
	.modal .btns span:LAST-CHILD {
		 background-color: #34a3ff;
		 color: #fff;
	}
</style>
</head>
<body>
	<div class="modal modal_a">
		<div class="panel">
			<div class="title">提示</div>
			<div class="content">温馨提示,下雨天注意安全.</div>
			<div class="btns">
				<span class="close">确认</span>
			</div>
		</div>
	</div>
	<div class="modal modal_c">
		<div class="panel">
			<div class="title">提示</div>
			<div class="content">您确实执行该操作吗?</div>
			<div class="btns">
				<span class="close">取消</span>
				<span class="confirm">确认</span>
			</div>
		</div>
	</div>
	<div class="modal modal_l">
		<div style="text-align: center;margin-top: 80%;">
			<img src="loading.gif"/>
		</div>
	</div>
	
	<div class="container">
		<div class="header">用户信息</div>
		<div class="main">
			<button type="button" onclick="alert('提示一下!');">温馨提示...</button>			
			<button type="button" onclick="del();">删除...</button>	
			<ul>
				<li>运维管理</li>
			</ul>		
			<center>我是有底线的...</center><br>
		</div>
	</div>
</body>
<script type="text/javascript" src="../jquery3.3.1.min.js"></script>
<script type="text/javascript">
	(function(w){
		initModal(); //初始化
		function initModal(){
			if(!$('.modal_a')[0]){
				// 添加 元素 dom
			}
			$('.close').click(function(){
				$('.modal').fadeOut(100);
			})
		}
		w.close = function(){
			$('.modal').hide();
		}
		w.alert = function(msg,times){//设置times参数可隐藏多个modal切换,闪烁效果,如果弹框确认之后提示
			msg && $($('.modal_a .content').text(msg));
			$('.modal_a').fadeIn(times||200);
		};
		w.confirm = function(msg , fn){
			if(typeof msg == 'function'){
				fn = msg;
				msg = undefined ;
			}
			msg && $($('.modal_c .content').text(msg));
			$('.confirm').off('click').on('click',function(){
				$('.modal').hide();
				fn();
			})
			$('.modal_c').fadeIn(200);
		};
	})(window)
	$.ajaxSetup({
		beforeSend:function(){
			$('.modal_l').fadeIn(200);
		},
		complete:function(){
			$('.modal_l').fadeOut(100);
			loading = false;
		},error:function(){
			for (var i = 0; i < 10; i++) {
				$('ul').append('<li>测试'+i);
			}
		}
	})
	
	function del(){
		confirm(function(){
			alert('删除成功!',1);
		});
	}
	$(window).scroll(function(){
		var h1 = $(document).height();
		var h2 = $(window).height();
		var top = $(window).scrollTop();
		if(h2 + top + 66 > h1 && h1/h2 < 3 ){
			!loading && load();
		}
	})
	var loading = false;
	load();
	function load(){
		loading = true;
		$(function(){
			$.getJSON('sys/getResourceTree2',function(res){
				res.data.forEach(function(p){
					$('ul').append('<li>'+p.name)
				})
			})
		})
	}
</script>
</html>